<template>
  <div class="activity-list">
    <!-- Page Header -->
    <div class="page-header">
      <h1 class="page-title">活动管理</h1>
      <div class="toolbar">
        <el-input
          v-model="search.title"
          style="width: 280px"
          placeholder="请输入活动名称进行搜索"
          clearable
          :prefix-icon="Search"
          @change="onSearchChange"
        >
          <template #append>
            <el-button :icon="Search" @click="onSearchChange"></el-button>
          </template>
        </el-input>
      </div>
    </div>

    <div class="action-bar">
      <div class="btn-group">
        <el-button-group>
          <el-button type="primary" :icon="Plus" @click="plusRow"
            >添加活动</el-button
          >
          <el-button
            type="danger"
            :icon="Delete"
            @click="deleteAll"
            :disabled="!hasSelection"
          >
            删除所选 ({{ selectedCount }})
          </el-button>
        </el-button-group>
      </div>

      <div class="filter-group">
        <el-select
          v-model="filterStatus"
          placeholder="按状态筛选"
          clearable
          @change="onFilterChange"
          style="width: 150px"
        >
          <el-option
            v-for="(value, key) in statusMap"
            :key="key"
            :label="value.text"
            :value="key"
          >
            <el-tag
              :type="value.type"
              size="small"
              class="status-tag"
              effect="dark"
              >{{ value.text }}</el-tag
            >
          </el-option>
        </el-select>
      </div>
    </div>

    <el-card class="table-card" shadow="hover">
      <el-table
        ref="tableRef"
        :data="tableData"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
        tooltip-effect="light"
        :show-overflow-tooltip="true"
        border
        style="width: 100%"
        v-loading="loading"
        element-loading-text="加载中..."
        highlight-current-row
      >
        <el-table-column type="selection" width="55px" />
        <el-table-column
          prop="cover"
          label="活动图片"
          width="100px"
          align="center"
        >
          <template #default="scope">
            <el-image
              :src="scope.row.cover"
              class="activity-img"
              fit="cover"
              :preview-src-list="[scope.row.cover]"
              preview-teleported
            >
              <template #error>
                <div class="image-error">
                  <el-icon><IconPicture /></el-icon>
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="活动名称" sortable width="150px">
          <template #default="scope">
            <div class="title-cell">
              <span class="activity-title">{{ scope.row.title }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="categoryName" label="分类名称" width="150px">
          <template #default="scope">
            <el-tag size="small" effect="dark">{{
              scope.row.categoryName
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="holdName" label="主办人" width="120px" />
        <el-table-column prop="captcha" label="签到码" width="150px">
          <template #default="scope">
            <el-tag size="small" effect="light">{{ scope.row.captcha }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="holdPhone" label="联系电话" width="140px" />
        <el-table-column
          prop="status"
          label="活动状态"
          width="100px"
          align="center"
        >
          <template #default="scope">
            <el-tag
              :type="statusMap[scope.row.status]?.type || 'info'"
              disable-transitions
              size="small"
              effect="dark"
            >
              {{ statusMap[scope.row.status]?.text || "未知状态" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="registerCount"
          label="报名人数"
          sortable
          width="100px"
          align="center"
        >
          <template #default="scope">
            <span class="stat-number">{{ scope.row.registerCount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="participantsCount"
          label="参与人数"
          sortable
          width="100px"
          align="center"
        >
          <template #default="scope">
            <span class="stat-number">{{ scope.row.participantsCount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="collectCount"
          label="收藏数"
          sortable
          width="100px"
          align="center"
        >
          <template #default="scope">
            <span class="stat-number">{{ scope.row.collectCount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="wishCount"
          label="心愿数"
          sortable
          width="100px"
          align="center"
        >
          <template #default="scope">
            <span class="stat-number">{{ scope.row.wishCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="detailAddress" label="详细地址" width="120px" />
        <el-table-column prop="description" label="活动描述" width="120px">
          <template #default="scope">
            <el-tooltip
              :content="scope.row.description"
              placement="top"
              :show-after="500"
              max-width="300"
            >
              <div class="description-cell">{{ scope.row.description }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          sortable
          label="开始时间"
          width="150px"
          prop="startTime"
        >
          <template #default="scope">
            <span class="time-cell">{{ scope.row.startTime }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable label="结束时间" width="150px" prop="endTime">
          <template #default="scope">
            <span class="time-cell">{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template #default="scope">
            <div class="action-buttons">
              <el-tooltip content="编辑" placement="top" :show-after="300">
                <el-button
                  link
                  type="primary"
                  :icon="Edit"
                  circle
                  @click="editRow(scope)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top" :show-after="300">
                <el-button
                  link
                  type="danger"
                  :icon="Delete"
                  circle
                  @click="deleteRow(scope)"
                ></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="onPaginationChange"
          @current-change="onPaginationChange"
          background
        />
      </div>
    </el-card>

    <el-dialog
      class="activity-dialog"
      v-model="plusAndEditDialog.isVisible"
      :title="plusAndEditDialog.title"
      width="750px"
      align-center
      destroy-on-close
    >
      <el-form
        :model="plusAndEditForm"
        :rules="rules"
        ref="formRef"
        label-width="120px"
        label-position="left"
        class="activity-form"
      >
        <el-divider content-position="left">基本信息</el-divider>

        <el-row :gutter="20">
          <el-col :span="14">
            <el-form-item label="活动名称" prop="title">
              <el-input
                v-model="plusAndEditForm.title"
                placeholder="请输入活动名称"
              />
            </el-form-item>

            <el-form-item label="活动描述">
              <el-input
                v-model="plusAndEditForm.description"
                :autosize="{ minRows: 3, maxRows: 6 }"
                type="textarea"
                placeholder="请输入活动描述..."
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="活动图片" prop="cover">
              <div class="upload-container">
                <el-image
                  :src="plusAndEditForm.cover"
                  class="preview-image"
                  fit="cover"
                >
                  <template #error>
                    <div class="image-placeholder">
                      <el-icon><IconPicture /></el-icon>
                      <span>暂无图片</span>
                    </div>
                  </template>
                </el-image>
                <el-upload
                  class="image-uploader"
                  :http-request="customUpload"
                  :limit="1"
                  v-model:file-list="fileList"
                  :on-error="handleError"
                  :before-remove="beforeRemove"
                  :on-exceed="handleExceed"
                  drag
                >
                  <el-icon class="el-icon--upload"><Upload /></el-icon>
                  <div class="el-upload__text">
                    拖拽文件到此处或<em>点击上传</em>
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      支持 jpg/png 格式，文件大小不超过 500KB
                    </div>
                  </template>
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">活动分类与主办方</el-divider>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="分类名称" prop="categoryName">
              <el-select
                v-model="plusAndEditForm.categoryName"
                placeholder="请选择分类"
                clearable
                @clear="onCategoryFilterChange"
                @focus="getCategoryOptions"
                class="w-100"
              >
                <el-option
                  v-for="item in categoryOptions"
                  :key="item.id"
                  :label="item.categoryName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="主办人" prop="holdName">
              <el-select
                v-model="plusAndEditForm.holdName"
                placeholder="请选择主办人"
                clearable
                @clear="onUserChange"
                @focus="getUserOptions"
                filterable
                class="w-100"
              >
                <el-option
                  @click="onChange(item)"
                  v-for="item in userOptions"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="联系电话" prop="holdPhone">
          <el-input
            disabled
            v-model="plusAndEditForm.holdPhone"
            placeholder="选择主办人后自动填充"
          />
        </el-form-item>

        <el-divider content-position="left">活动数据</el-divider>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="报名人数" prop="registerCount">
              <el-input-number
                v-model="plusAndEditForm.registerCount"
                :min="0"
                controls-position="right"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收藏数" prop="collectCount">
              <el-input-number
                v-model="plusAndEditForm.collectCount"
                :min="0"
                controls-position="right"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="心愿数" prop="wishCount">
              <el-input-number
                v-model="plusAndEditForm.wishCount"
                :min="0"
                controls-position="right"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签到码" prop="wishCount">
              <el-input
                v-model="plusAndEditForm.captcha"
                :min="0"
                controls-position="right"
                style="width: 100%"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">活动时间与地点</el-divider>

        <el-form-item label="举办粗略位置">
          <el-cascader
            v-model="selectedAddress"
            :props="cascaderProps"
            placeholder="请选择举办粗略位置"
            @change="handleAddressChange"
            ref="cascaderRef"
            clearable
            :load-data="loadAddressData"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="举办详细位置"  prop="detailAddress">
          <el-input
            placeholder="请输入详细地址"
            v-model="plusAndEditForm.detailAddress"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="活动时间" required>
          <el-row :gutter="12">
            <el-col :span="12">
              <el-date-picker
                v-model="startTime"
                type="datetime"
                placeholder="开始时间"
                style="width: 100%"
                @change="handleStartTimeChange"
              />
            </el-col>
            <el-col :span="12">
              <el-date-picker
                v-model="endTime"
                type="datetime"
                placeholder="结束时间"
                style="width: 100%"
                :disabled-date="disableBeforeStartDate"
                @change="handleEndTimeChange"
              />
            </el-col>
          </el-row>
        </el-form-item>

        <el-divider content-position="left">活动状态</el-divider>

        <el-form-item label="活动状态">
          <div class="status-switch">
            <span :class="{ 'active-status': !plusAndEditForm.status }"
              >不发布</span
            >
            <el-radio-group v-model="plusAndEditForm.status">
              <el-radio-button :value="0">未发布</el-radio-button>
              <el-radio-button :value="1">已发布</el-radio-button>
              <el-radio-button :value="2">签到中</el-radio-button>
            </el-radio-group>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="plusAndEditDialog.isVisible = false"
            >取消</el-button
          >
          <el-button type="primary" @click="submitForm(formRef)">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  activityPage,
  activityDeleteByUserId,
  activityDeleteBatch,
  activityAdd,
  activityEdit,
} from "@/apis/activity";
import {
  Delete,
  Edit,
  Plus,
  Search,
  Picture as IconPicture,
  Upload,
} from "@element-plus/icons-vue";
import { reactive, onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { getFormatTime } from "@/apis/utility";
import { listNode, activityLocationAdd } from "@/apis/admin/systemRegion";
import { ElMessage, ElMessageBox } from "element-plus";
import { upload } from "@/apis/upload";
import { getAllUsers } from "@/apis/admin/user";
import { getAllCategory } from "@/apis/admin/category";

// 表格数据
const tableData = ref([]);
// 加载状态
const loading = ref(false);
// 提交状态
const submitting = ref(false);
// 筛选状态
const filterStatus = ref("");
// 表格选中行数量
const selectedCount = ref(0);
// 时间选择
const startTime = ref(null);
const endTime = ref(null);

// 搜索输入框搜索条件
const search = reactive({
  title: "",
});

// 处理表格选择
const handleSelectionChange = (selection) => {
  selectedCount.value = selection.length;
};

// 是否有选中行
const hasSelection = computed(() => {
  return selectedCount.value > 0;
});

// 状态过滤处理
const onFilterChange = () => {
  getPage();
};

// 格式化时间显示
const formatTime = (timeString) => {
  if (!timeString) return "未设置";
  try {
    const date = new Date(timeString);
    return date.toLocaleString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    });
  } catch (error) {
    return timeString;
  }
};

// 处理开始时间变更
const handleStartTimeChange = (val) => {
  if (endTime.value && val > endTime.value) {
    endTime.value = null;
  }
  plusAndEditForm.startTime = formatToLocalDateTime(val);
  console.log("开始时间:", val);
};

// 处理结束时间变更
const handleEndTimeChange = (val) => {
  plusAndEditForm.endTime = formatToLocalDateTime(val);
};

// 格式化日期为后端可接受的LocalDateTime格式
const formatToLocalDateTime = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 禁用开始时间之前的日期
const disableBeforeStartDate = (time) => {
  if (!startTime.value) return false;
  return time < startTime.value;
};

/**
 * 搜索输入框对应的触发事件
 */
const onSearchChange = () => {
  getPage();
};

// 存储排序字段
const orders = reactive({
  column: "id",
  isAsc: true,
});

/**
 * 表格排序函数
 * @param {*} column 当前列对
 * @param {*} prop 当前字段
 * @param {*} order 当前排序方式
 */
const sortChange = ({ prop, order }) => {
  Object.assign(orders, {
    column: `${prop}`,
    isAsc: order === "ascending",
  });
  getPage();
};

/**
 * 删除一行
 * @param {*} scope
 */
const deleteRow = (scope) => {
  ElMessageBox.confirm(`确定要删除活动 "${scope.row.title}" 吗?`, "删除确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    loading.value = true;
    activityDeleteByUserId(scope.row.id)
      .then((result) => {
        ElMessage.success("删除成功");
        getPage();
      })
      .catch((error) => {
        ElMessage.error("删除失败: " + error.message);
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

/**
 * 获取表格组件引用对象
 */
const tableRef = ref();

/**
 * 删除全部选中行
 */
const deleteAll = async () => {
  if (selectedCount.value === 0) {
    ElMessage.warning("请至少选择一条记录");
    return;
  }

  ElMessageBox.confirm(
    `确定要删除所选的 ${selectedCount.value} 条记录吗?`,
    "批量删除确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(async () => {
    loading.value = true;
    const selectionRows = tableRef.value.getSelectionRows();
    const ids = selectionRows.map((row) => row.id);

    try {
      await activityDeleteBatch(ids);
      ElMessage.success(`成功删除 ${ids.length} 条记录`);
      getPage();
    } catch (error) {
      ElMessage.error("批量删除失败: " + error.message);
    } finally {
      loading.value = false;
    }
  });
};

/**
 * 分页查询
 */
const getPage = async () => {
  loading.value = true;

  try {
    const searchParams = { ...search };

    // 添加状态筛选
    if (filterStatus.value !== "") {
      searchParams.status = filterStatus.value;
    }

    const result = await activityPage(
      {
        search: searchParams,
        orders: [orders],
      },
      pagination.page,
      pagination.size
    );

    if (result != undefined) {
      tableData.value = result.data.records;
      pagination.total = result.data.total;
    }
  } catch (error) {
    ElMessage.error("加载数据失败: " + error.message);
  } finally {
    loading.value = false;
  }
};

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0,
});

/**
 * 分页改变函数
 */
const onPaginationChange = () => {
  getPage();
};

/**
 * 添加和修改表格数据
 */
let plusAndEditForm = reactive({});

/**
 * 添加和修改的对话框
 */
const plusAndEditDialog = reactive({
  isVisible: false,
  title: "",
});

/**
 * 修改当前行的数据
 * @param {*} scope
 */
const editRow = (scope) => {
  fileList.value = [];
  address.value = {};
  selectedAddress.value = [];

  plusAndEditDialog.isVisible = true;
  plusAndEditDialog.title = "修改活动";
  Object.assign(plusAndEditForm, scope.row);

  // 设置时间选择器的值
  if (scope.row.startTime) {
    startTime.value = new Date(scope.row.startTime);
  }

  if (scope.row.endTime) {
    endTime.value = new Date(scope.row.endTime);
  }
};

/**
 * 添加一行数据
 */
const plusRow = () => {
  fileList.value = [];
  address.value = {};
  selectedAddress.value = [];
  startTime.value = null;
  endTime.value = null;

  plusAndEditDialog.isVisible = true;
  plusAndEditDialog.title = "添加活动";
  plusAndEditForm = {
    status: 0,
    registerCount: 0,
    collectCount: 0,
    wishCount: 0,
  };
};

/**
 * 修改和添加的保存功能
 */
const save = async () => {
  submitting.value = true;

  try {
    if (plusAndEditDialog.title == "添加活动") {
      await activityAdd(plusAndEditForm);
      ElMessage.success("添加成功");
    } else if (plusAndEditDialog.title == "修改活动") {
      console.log("#################");

      await activityEdit(plusAndEditForm);
      ElMessage.success("修改成功");
    }

    plusAndEditDialog.isVisible = false;
    getPage();
  } catch (error) {
    ElMessage.error("保存失败: " + error.message);
  } finally {
    submitting.value = false;
  }
};

// 生命周期
onMounted(() => {
  // 页面加载的时候立刻执行一次请求
  getPage();
});

// 上传文件
let fileList = ref([]);

// 上传失败回调
function handleError(error, file, fileList) {
  console.error("上传失败：", error);
  ElMessage.error("上传失败，请检查网络或文件格式");
}

const handleExceed = () => {
  ElMessage.warning(`最多只能上传一个文件，请删除后再上传`);
};

const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(`确定要删除 ${uploadFile.name} 这个文件吗?`).then(
    () => true,
    () => false
  );
};

const customUpload = async (params) => {
  const file = params;

  try {
    const result = await upload(file);
    plusAndEditForm.cover = result.data;
    ElMessage.success("上传成功");
  } catch (error) {
    ElMessage.error("上传失败: " + error.message);
  }
};

// 获取主办人信息
const userOptions = ref([]);

// 获取所有用户
const getUserOptions = async () => {
  try {
    const result = await getAllUsers();
    userOptions.value = result.data;
  } catch (error) {
    ElMessage.error("获取用户列表失败: " + error.message);
  }
};

// 活动改变时触发
const onUserChange = async () => {
  await getUserOptions();
  onChange();
};

const onChange = (item) => {
  if (!item) return;

  plusAndEditForm.organizerId = item.id;
  plusAndEditForm.holdPhone = item.mobile;
};

// 分段存放地址
const address = ref({});
// 地址级联
const selectedAddress = ref([]);
// 绑定 ref 用来访问组件实例
const cascaderRef = ref();
const cascaderProps = {
  lazy: true,
  lazyLoad: loadAddressData,
  value: "value",
  label: "label",
  children: "children",
  emitPath: true,
  checkStrictly: false,
};

// 选中地址后的处理
function handleAddressChange(value) {
  const checkedNodes = cascaderRef.value.getCheckedNodes();
  if (!checkedNodes.length) return;

  const pathNodes = checkedNodes[0].pathNodes;
  address.value.detailAddress = "";
  const levelMap = ["province", "city", "district", "street"]; // index 对应 level
  pathNodes.forEach((node, index) => {
    const key = levelMap[index];
    if (key) {
      address.value[`${key}Id`] = node.value;
      address.value[`${key}Name`] = node.label;
      address.value.detailAddress =
        address.value.detailAddress + node.label + "-";
    }
  });
}

// 详细地址对话框
function onDetailAddressChange() {
  address.value.detailAddress += plusAndEditForm.detailAddress;

  activityLocationAdd(address.value)
    .then((res) => {
      plusAndEditForm.locationId = res.data;
      ElMessage.success("地址添加成功");
    })
    .catch((error) => {
      ElMessage.error("地址添加失败: " + error.message);
    });
}

// 懒加载地址数据
function loadAddressData(node, resolve) {
  // 根节点无 parentCode
  const parentCode = node.level === 0 ? 0 : node.value;

  listNode(parentCode)
    .then((res) => {
      const nodes = res.data.map((item) => ({
        value: item.value,
        label: item.label,
        leaf: item.leaf, // 后端控制是否是最后一级
      }));
      resolve(nodes);
    })
    .catch((error) => {
      console.error("加载地址失败", error);
      ElMessage.error("加载地址数据失败");
      resolve([]);
    });
}

// 表单验证规则
const formRef = ref();
const rules = {
  title: [
    { required: true, message: "活动名称不能为空", trigger: "blur" },
    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
  ],
  holdName: [{ required: true, message: "请选择主办人", trigger: "change" }],
  categoryName: [
    { required: true, message: "请选择活动分类", trigger: "change" },
  ],
};

function submitForm(formRef) {
  formRef.validate((valid) => {
    if (valid) {
      save();
    } else {
      ElMessage.error("请完善表单信息");
      console.log("❌ 验证不通过");
    }
  });
}

// 活动分类
const categoryOptions = ref([]);

// 获取活动分类
const getCategoryOptions = async () => {
  getAllCategory().then((result) => {
    categoryOptions.value = result.data;
    // console.log(result);
  });
};
// 活动改变时触发
const onCategoryFilterChange = async () => {
  await getCategoryOptions();
};
// 活动状态
const statusMap = {
  0: { text: "未发布", type: "primary" },
  1: { text: "已发布", type: "success" },
  2: { text: "签到中", type: "warning" },
};
</script>

<style scoped lang="less">
/* Activity Management Page Styles */
.activity-list {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .page-title {
      font-size: 22px;
      font-weight: 600;
      color: #303133;
      margin: 0;
    }
  }

  .action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;

    .btn-group {
      display: flex;
      align-items: center;
    }

    .filter-group {
      display: flex;
      align-items: center;
      gap: 12px;
    }
  }

  .table-card {
    border-radius: 8px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    .activity-img {
      width: 60px;
      height: 60px;
      border-radius: 6px;
      object-fit: cover;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;

      &:hover {
        transform: scale(1.1);
      }
    }

    .image-error {
      width: 80px;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #f5f7fa;
      border-radius: 6px;
      color: #909399;
      font-size: 24px;
    }

    .title-cell {
      .activity-title {
        font-weight: 500;
        color: #303133;
      }
    }

    .stat-number {
      font-weight: 600;
      color: #409eff;
    }

    .description-cell {
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .time-cell {
      color: #606266;
      font-size: 13px;
    }

    .action-buttons {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
  }

  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    padding: 12px 0;
  }

  /* Dialog and Form Styles */
  .activity-dialog {
    :deep(.el-dialog__header) {
      border-bottom: 1px solid #ebeef5;
      padding: 20px;
      margin: 0;

      .el-dialog__title {
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }
    }

    :deep(.el-dialog__body) {
      padding: 24px;
    }

    :deep(.el-dialog__footer) {
      border-top: 1px solid #ebeef5;
      padding: 16px 24px;
    }

    .activity-form {
      .el-divider {
        margin: 16px 0;

        :deep(.el-divider__text) {
          font-size: 15px;
          font-weight: 500;
          color: #606266;
          background-color: #fff;
        }
      }

      .el-form-item {
        margin-bottom: 20px;

        :deep(.el-form-item__label) {
          font-weight: 500;
          color: #606266;
        }
      }

      .w-100 {
        width: 100%;
      }

      .upload-container {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .preview-image {
          width: 100%;
          height: 140px;
          border-radius: 6px;
          object-fit: cover;
          border: 1px solid #ebeef5;
          overflow: hidden;
        }

        .image-placeholder {
          width: 100%;
          height: 140px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: #f5f7fa;
          border-radius: 6px;
          color: #909399;
          border: 1px dashed #d9d9d9;

          .el-icon {
            font-size: 30px;
            margin-bottom: 8px;
          }
        }

        .image-uploader {
          width: 100%;

          :deep(.el-upload) {
            width: 100%;

            .el-upload-dragger {
              width: 100%;
              height: auto;
              padding: 12px;

              .el-icon--upload {
                margin-top: 8px;
                font-size: 24px;
              }

              .el-upload__text {
                margin: 8px 0;

                em {
                  color: #409eff;
                  font-style: normal;
                }
              }
            }
          }

          .el-upload__tip {
            line-height: 1.4;
            color: #909399;
          }
        }
      }

      .status-switch {
        display: flex;
        align-items: center;
        gap: 8px;

        .active-status {
          color: #409eff;
          font-weight: 500;
        }
      }
    }
  }
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
  .activity-list {
    padding: 16px;

    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;
    }

    .action-bar {
      flex-direction: column;
      align-items: flex-start;
    }

    .table-card {
      overflow-x: auto;
    }
  }
}

@media (prefers-color-scheme: dark) {
  .activity-list {
    background-color: #1e1e1e;

    .page-header .page-title {
      color: #e5e5e5;
    }

    .table-card {
      background-color: #242424;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

      .image-error {
        background-color: #2c2c2c;
      }

      .title-cell .activity-title {
        color: #e5e5e5;
      }

      .time-cell {
        color: #b0b0b0;
      }
    }

    .activity-dialog {
      .activity-form {
        .el-divider :deep(.el-divider__text) {
          background-color: #242424;
          color: #e5e5e5;
        }

        .image-placeholder {
          background-color: #2c2c2c;
          border-color: #444;
        }
      }
    }
  }
}
</style>
